<template>
    <div>
        <div align="right" style="margin-bottom: 20px">
            <el-button type="primary" size="mini" @click="backHome">返回主页</el-button>
        </div>
        <el-row>
            <el-col :span="15">
                <div class="details_title">产量指标</div>
            </el-col>
            <el-col :span="9">
                <el-select v-model="soilName" size="mini">
                    <el-option v-for="item in soilOption"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-divider></el-divider>

        <el-row style="margin-bottom: 20px">
            <el-col :span="8">
                <div class="son_title">环境图表</div>
            </el-col>
            <el-col :span="8">
                <el-date-picker v-model="barChartDate" size="mini"></el-date-picker>
            </el-col>
            <el-col :span="8">
                <el-button size="mini" @click="getData">查询</el-button>
            </el-col>
        </el-row>
        <el-table :data="yieldTableData" border>
            <el-table-column label="产品指标" prop="productName"></el-table-column>
            <el-table-column label="当前值" prop="productName"></el-table-column>
            <el-table-column label="最佳值" prop="productName"></el-table-column>
            <el-table-column label="综合打分" prop="productName"></el-table-column>
        </el-table>
        <el-divider></el-divider>

    </div>
</template>

<script>
    export default {
        name: "yield-charts",
        data() {
            return {
                soilName: '',
                soilOption: [{
                    value: '地块一',
                    label: '地块一'
                }],
                barChartDate: new Date(),
                compareForDateDateValue: new Date(),
                yieldTableData:[]
            }
        },
        mounted() {
            this.getCropId();
        },
        methods:{
            getCropId() {

                let _this = this;
                // this.$nextTick(()=>{
                this.$http.get('gengyun/indicator/getCropRotationId').then((res) => {
                    // console.log(res)
                    let soilId = res.data.stringListMap;
                    let length = soilId.length;
                    let soil = {
                        value: '',
                        label: ''
                    };
                    for (let i = 0; i < length; i++) {
                        soil.value = soilId[i];
                        soil.label = soilId[i];
                        // _this.$set(_this.soilOption , i , soil);
                        _this.soilOption[i] = soil
                        soil = {
                            value: '',
                            label: ''
                        }
                    }
                    _this.soilName = _this.soilOption[0].value
                }).catch((error) => {
                    console.log(error)
                });
                // })

                this.getData();
                // this.initCharts();
            },
            getData() {
                let _this = this;
                setTimeout(() => {
                    let form = new FormData;
                    form.append('time', this.barChartDate.toLocaleDateString());
                    form.append('indicatorType', '产品指标');
                    this.$http.post('gengyun/indicator/getProductIndicator', form).then((res) => {
                        console.log(res)
                        // let nutrition = res.data.indicatorsByTime;
                        // let length = nutrition.length;
                        // let nutritionTemp = {
                        //     target: '',
                        //     data: ''
                        // };
                        // for (let i = 0; i < length; i++) {
                        //     nutritionTemp.target = nutrition[i].indicator_name;
                        //     nutritionTemp.data = nutrition[i].digit_value;
                        //     // _this.environment[i] = environmentTemp;
                        //     _this.$set(this.nutrition, i, nutritionTemp);
                        //     nutritionTemp = {
                        //         target: '',
                        //         data: ''
                        //     };
                        // }
                    }).catch();
                    // this.$set(this.option.series[0], 'data', this.nutrition);
                    // this.option.series[0].data = this.nutrition;
                    // console.log(this.nutrition)
                }, 100);
            },
            backHome(){
                this.$router.push('/home/bar')
            }
        }
    }
</script>

<style scoped>

</style>